
    
    <script setup>
    import {ref} from "vue"
    import {User,Lock} from '@element-plus/icons-vue'
    
    const user = ref({})
    const flag = ref(false)
    const getCaptcha = ()=>{
    
    }
    
    </script>



<template>
    <div id="login-div">
    
      <el-card style="width: 400px; height: 300px;margin: 0 auto;position: relative;top: 250px;opacity: 0.7">
    
        <div>
          <h1 style="text-align: center">讯飞人工智能教育系统</h1>
        </div>
    
        <el-form style="margin-top: 20px;">
    
          <el-form-item >
            <el-input  :prefix-icon="User" placeholder="请输入手机号" v-model="user.telephone"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="flex-container" v-show="flag">
              <el-input
                  :prefix-icon="Lock"
                  type="password"
                  placeholder="请填写验证码"
                  v-model="user.captcha"
                  @keydown.enter="login()"
                  style="width: 250px;"
              ></el-input>
              <span class="captcha-button">
              <el-button type="primary" @click="getCaptcha()" >获取验证码</el-button>
              </span>
            </div>
            <div class="flex-container" v-show="!flag">
              <el-input
                  :prefix-icon="Lock"
                  type="password"
                  placeholder="请输入密码"
                  v-model="user.password"
                  @keydown.enter="login()"
                  style="width: 360px;"
              ></el-input>
    <!--          <span class="captcha-button">-->
    
    <!--          </span>-->
            </div>
          </el-form-item>
    
          <el-form-item>
    
            <el-button style="width: 100%;" type="primary" @click="login()">登录</el-button>
          </el-form-item>
          <el-form-item>
            <router-link to="/reg">注册</router-link>
            <router-link to="/reg" style="margin-left: 110px;">其他登录方式</router-link>

            <router-link style="margin-left: 80px;" to="#" @click="flag=!flag">忘记密码</router-link>
    
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    </template>
    
    <style lang="scss"  scoped>
    #login-div {
      height: 100vh; /*div默认宽度是父级的100% 但高度需要自己设置 这样插入图片才有显示*/
      background-image: url("@/assets/imgs/login.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin:0 auto;
    }
    .flex-container {
      display: flex;
      /*justify-content: space-between;*/
      align-items: center; /* 使按钮与输入框垂直居中对齐 */
    }
    
    .captcha-button {
      margin-left: 10px; /* 调整间距，可以根据需要更改这个值 */
    }
    
    </style>